Digo a vocês que o leiaute de uma página web muitas vezes é tudo que ela precisa para ser fantástica e agradar o usuário.
Já fiz sites dinâmicos (ASP NET/Clássico, PHP, etc) com lógicas super complicadas e interessantes mas o usuário (mesmo os analistas responsáveis que sabiam o que corria por traz da página) quando viram a página nem ligaram para sua lógica ou funcionamento mas todos ficaram muito impressionados com o visual. E fonte de letras e a coisa mais básica e uma das mais importantes do HTML.
Se você trabalha com front-end ( aplicações web que visam atender os clientes da empresa ) este é um dos itens mais importantes e, com certeza, um dos itens que melhor deve conhecer. Ele é o cartão de visitas tanto da empresa quanto para o analista que elaborou o site .
Falando especificamente de estilo de uma página, as imagens são muito mais importantes que os textos numa página web mas você raramente verá um site com imagens excepcionais com textos 'feios', mesmo porque uma bela imagem é muito mais difícil de produzir e alinhar que um texto bem 'formatado'. Por isso aprenda a formatar bem o texto e depois vá para as imagens , não o contrário e não se preocupe que você terá surpresas no modo com que o browser trabalha diferentemente quando combinamos esses dois tipos de objetos.
Quem dita o estilo de sua página sempre será seu publico alvo , isto se você quiser que seu site tenha boa audiência. Sendo assim sites jurídicos usam fontes mais tradicionais, poucas cores ( mais branco, preto e cinza ) e sites mais inovadores usam fontes mais 'rebuscadas', tecnológicas que passam um ideia de ousadia ou inovação.
Sites de entidades profissionais costumam ter estilo típico como os sites de músicos, por exemplo, usam mais o estilo preto de fundo e isto muda totalmente como as imagens e textos devem ser formatados. Com certeza você estará errando se usar um estilo de site tipo 'musical' ( sóbrio ) num site tipo 'infantil' (alegre, berrante).
Via de regra evite usar cores aberrantes ou que sejam um incomodo para o visitante como um uma cor de fundo laranja, pink. A não ser que seu site procure justamente um público que goste de aberração use essas cores com moderação, em pequenas áreas para destaque de um tópico.
Muito da formatação de texto antiga era feito por tags especificas como a <b> mas no html moderno a maioria da formatação é feita por classes e estilos.
A grande maioria dessas tags antigas que atuam nas fontes de letras elas sempre terão uma tag de abertura (onde começa o efeito) e outra de fechamento e uma tag de fechamento (onde o efeito se encerra). Por isso uma tag <b> sempre terá uma tag </b> e um estilo aplicado a uma tag se encerrará quando ela for fechada. Olhe um bom exemplo (bom está entre as tags b)
O item mais básico numa página contendo texto é a fonte das letras. Portanto ao usar uma fonte de letra faça um teste para ver se ficou boa e lembre-se que se quando um 'cliente' abrir o site ou exibirá a fonte que você escolheu ou uma fonte alternativa. Pode ser que nessa fonte alternativa sua mensagem não fique tão legal.
Regra : Use as fontes de letras nativa da plataforma do hospedeiro do seu site da Internet ou nativas no sistema Operacional. Não instale novas fontes de letras no seu micro e não utilizar fontes de letras que você baixou da Internet no seu site. A gente costuma fazer isso para criar 'checkpoints' do tipo para verificar se a pessoa é um ser humano...ela tem que ler o texto e escrever ele em outra caixa de texto. Dá pra notar que não é muito amigável para o usuário e muito menos para o programador que precisa subir essas fontes na publicação do site.
Há um tempo atras a gente utilizava a tag font para definir a fonte de letra . Só pra relembrar :
Exemplo : Texto exibido na fonte Verdana
Código : <font face='Verdana'>Texto exibido na fonte Verdana </font>
Mas no HTML5 toda a formatação dos elementos da página ( inclusive a formatação da fonte de letra ) passou a ser feita pela CSS e foi uma melhoria significativa em seus recursos, por isso foi separada em diversos 'parâmetros' de estilos como font-size(tamanho da letra), [font-]color(cor da letra), font-weight(negrito), etc
Por exemplo, a fonte de letras ficou sendo atributo do estilo font-family da tag:
Exemplo : Texto exibido na fonte Verdana
Código : <span style="font-family:Verdana">Texto exibido na fonte Verdana </span>
Note que ao definir um font-family você sugere ao browser uma família de tipo de letras. Se o browser não tiver a fonte que você escolheu ele vai usar a fonte mais próxima do estilo da mencionada, uma fonte alternativa qualquer ou dentro de uma lista de fontes preferidas do próprio servidor web. Caso nenhuma fonte tenha qualquer semelhança com a fonte que você escolheu ele vai usar a fonte TIMES NEW ROMAN que é uma fonte horrosa mas pelo menos exibirá sua mensagem.
É por isso que na definição de fontes a gente costuma apontar para mais de uma fonte:
style="font-family:calibri,verdana,arial,helvetica;". Se na exibição do item não for encontrada a fonte
de letra calibri ele vai buscar a verdana. Se não achar a verdana vai buscar a arial. Se não encontrar a fonte
arial vai buscar a fonte helvetica. Se não achar nenhuma delas vai usar a fonte 'Times New Roman' que todos os
sistemas tem e, com certeza, sua mensagem será exibida ( pelo menos com uma fonte de letra horrorosa).
Note que na definição das fontes temos as fontes serifadas e as não serifadas. As serifadas tem, normalmente, um acabamento ornamental nas suas extremidades, são mais 'bem acabadas' e normalmente de visual mais agradável.
No ambiente web todas as fontes são 'True Type Font', ou seja, fontes que podemos exibir em qualquer tamanho o formato porque a fonte será exibida nítida e perfeitamente porque há recursos que comprimem ou expandam a letra para o tamanho que desejarmos. Isto porque o browser é muito bom e consegue expandir ou comp rimir fontes de letras sem que estas percam a qualidade visual.
Se você precisa que seu site exiba seu texto com fidelidade é melhor usar as fontes seguras que todos browsers de todos os sistemas operacionais tem mas se a fonte solicitada não for encontrada será utilizada outra em seu lugar com o estilo mais parecido possível ( bem similar ).
O texto sempre será exibido mesmo que a fonte de letra não exista no browser do cliente mas isto poderá trazer um outro problema, ele pode ser 'quebrado' num ponto inesperado ( como no caso da tela do browser ser uma tela de um celular ) e isto pode prejudicar o entendimento, a leitura ou mesmo impossibilitar a leitura do restante da frase.
Guarde esta regra: Você pode definir diversas fontes de letras separando-as por vírgula. Se o browser não achar a primeira utilizará a segunda, se não achar a segunda, utilizará a terceira e assim por diante e se não achar nenhuma vai usar a 'NEW TIMES ROMAN'.
Tecnicamente você deveria visualizar sua página utilizando cada uma das fontes de letras que você sugeriu para certificar-se que com nenhuma dessas fontes sua página fique ruim. Mas eu mesmo nunca fiz isso.
Outro detalhe importante a ser observado é como que fica o texto em relação a legibilidade, ou seja, qual será a dificuldade que o usuário terá em ler o texto. As vezes ao usar uma fonte de letras ela fica boa num tamanho mas quando reduzimos ela fica difícil de ler, não dá pra distinguir claramente os caracteres parecendo que um está colado com o outro. Isso é muito comum numa tela de celular. Portanto, especialmente se seu site for responsivo, redimensione a tela do browser e verifique o tamanho da letra porque poderá ficar horrível num dos formatos de exibição que você escolheu. Via de regra quanto mais facilmente 'legível' for sua página menos esforço será solicitado do usuário e mais agradável será para ele .
As fontes de letras abaixo costumam ser as mais usadas em sites web.
ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Calibri
Código:
<span style="font-family:'Calibri'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Calibri</span><br />
<span style="font-family:'Arial'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Arial</span><br />
<span style="font-family:'Verdana'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Verdana</span><br />
<span style="font-family:'Tahoma'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Tahoma</span><br />
<span style="font-family:'Times New Roman'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Times New Roman</span>
<span style="font-family:'Georgia'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Georgia</span><br />
<br />
<span style="font-family:'Arial Narrow'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Arial Narrow</span><br />
<span style="font-family:'Arial Narrow Bold'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Arial Narrow Bold</span><br />
<span style="font-family:'Franklin Gothic Medium'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Franklin Gothic Medium</span><br />
<span style="font-family:'sans-serif'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-sans-serif</span><br />
<span style="font-family:'Gill Sans'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Gill Sans</span><br />
<span style="font-family:'Gill Sans MT'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Gill Sans MT</span><br />
<span style="font-family:'Trebuchet MS'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Trebuchet MS</span><br />
<span style="font-family:'Gill Sans'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Gill Sans</span><br />
<span style="font-family:'Lucida Sans'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Lucida Sans e Lucida Sans Regular</span><br />
<span style="font-family:'Lucida Grande'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Lucida Grande</span><br />
<span style="font-family:'Lucida Sans Unicode'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Lucida Sans Unicode</span><br />
<span style="font-family:'Geneva'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Geneva</span><br />
<span style="font-family:'Segoe UI'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Segoe UI</span><br />
<span style="font-family:'Times'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Times</span><br />
<span style="font-family:'Cambria'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Cambria</span><br />
<span style="font-family:'Cochin'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Cochin</span><br />
<span style="font-family:'Impact'">ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz-0123456789-Impact</span><br />
A grande maioria das fontes de letras são similares e, por esse motivo, muito parecidas. Mas o importante é notar que não tem uma 'fonte feia', mas sempre haverá uma que é mais apropriada para a ocasião é mais agradável que a outra.
Coloquei no topo as fontes que prefiro. Note que temos fontes e variantes dessa fonte como Arial e Arial Narrow ( comprimida, encurtada ). Muitas fontes de letras são semelhantes de maneira que visualmente não encontramos diferenças. Note que você pode gostar muito de uma fonte mas se ela não existir na plataforma de exibição a sua mensagem poderá ficar bem mais feia pelo uso de uma fonte alternativa.
Note que as fontes mais 'rebuscadas' são mais difíceis de serem lidas e isso é péssimo porque os usuários não desejam se 'esforçar' para ler uma página web, nunca.
Estes estilos costumam ser particulares para uma plataforma ( windows, linux, etc). Os estilos tipo 'script' de fontes de letras se assemelham ao nosso estilo de escrita a mão, mas, normalmente, são confusos ou muito rebuscados para serem lidos e só devem ser usados em mensagens muito curtas como o título de uma mensagem.
Texto exibido na fonte Calibri - Meu estilo predileto mas só existe no windows e não é um estilo script
Texto exibido na fonte Script MT - Parece escrito a mão
Código :
<span style="font-family:Calibri">Texto exibido na fonte Calibri - Meu estilo predileto mas só existe no windows</span><br />
<span style="font-family:'Script MT'; font-size:22px;">Texto exibido na fonte Script MT - Parece escrito a mão</span><br />
A fonte de letra a ser utilizado vai depender do público alvo do seu site. Se for um site de negócios tem que ter um estilo ousado, se for um site para advogados tem que ser formal, se for para crianças tem que ser um estilo divertido. E tem fonte pra tudo que você possa imaginar.
Texto exibido na fonte Verdana - Bonita e comum a todas as plataformas.
É de fácil leitura e visualização e é uma das fontes de letras recomendadas para qualquer coisa. Elegante sem ser extravagante. Formal.
Código : <span style="font-family:Verdana">Texto exibido na fonte <b>Verdana</b></span>
- Bonita e comum a todas as plataformas.
Texto exibido na fonte Courier New - É muito deselegante por ser uma fonte de letra mono-espaçada, isto significa que a letra l consome o mesmo espaço (largura em pixels) da letra m.
Contudo é boa para destacar o texto parecendo que foi um computador que escreveu e muitas vezes usamos para depurar o site porque como todos caracteres tem a mesma largura podemos compara uma linha com outra de caracteres mais facilmente. Muito útil para descobrir caracteres escondidos que não são exibidos mas estão lá no nosso string. Note que a linha anterior terá exatamente o mesmo número de caracteres que a posterior se este tipo de fonte for utilizada.
Melhorando com um exemplo, supondo que quero saber quantos caracteres cabem na tela de um celular, na horizontal e na vertical. Esta informação é basica para sites responsivos quando não queremos diminuir a fonte da letra, por exemplo, porque já está pequena demais. Colocando uma régua de caracteres numa linha anterior ou posterior ( tipo 12345678901234567890) podemos saber onde ela está sendo quebrada quando giramos o aparelho.
Código : <span style="font-family:Courier New">Texto exibido na fonte <b>Courier New</b></span>
Texto exibido na fonte TimesRoman - Default da época que uma página
web devia ser formal...hoje, só em sites muito formais é utilizada. Muito formal e rebuscada e símbolo de coisa velha.
Mas ainda é melhor que nada ou não exibir a mensagem por falta de uma fonte de letras adequada.
Código : <span style="font-family:TimesRoman">Texto exibido na fonte <b>TimesRoman</b></span>
Lembre-se:
Nota 1 : fonte de letras mono-espaçada são as fontes de letras onde todos os caracteres possuem o mesmo tamanho. Uma letra m ocupa o mesmo espaço que uma letra l. Normalmente essas fontes de letras são feias mas como todas as letras tem a mesma largura este tipo de letra pode ser usado para alinhar as colunas de uma tabela, por exemplo.
Nota 2 : As fontes de letra tipo script são no estilo das letras escritas a mão e embora sejam muito bonitas tem muias pessoas que tem dificuldade em lê-las e muitas vezes não são claras podendo fazer com que o usuário confunda uma letra com outra.
Com certeza seu equipamento não tem a fonte escolhida neste texto : xyz
O computador no pior caso irá utilizar a fonte default (Times New Roman) para exibir essa mensagem ou a fonte de caracteres
default da página.
Código:
<span style="font-family:xyz">Com certeza seu equipamento não tem a fonte escolhida neste texto : xyz </span>
No exemplo acima o texto escrito com o estilo de letra script MT ficou muito pequena. Aumentando vejamos como fica:
Texto exibido na fonte Script MTPara alterar o tamanho da letra basta colocar no estilo o parâmetro font-size:30px onde 30px é o tamanho da fonte, 30 pixels ( style = 'font-size:30px').
Como já disse anteriormente você deve evitar de usar a tag font porque ela será descontinuada em breve. Contudo foi muito usada
e você deve pelo menos conhecê-la.
A antiga tag font tinha padrões específicos numerados de um a sete. No caso de queremos aumentar a fonte
de letra em 2 tamanhos acima tinhamos o parâmetro +2.
Exemplo de size - Tamanho normal
Exemplo de size=+2
Código :
<font size=+2>Exemplo de size=+2</font><br>
<font size=7>Texto com tamanho de fonte size=7</font><br>
<font size=6>Texto com tamanho de fonte size=6</font><br>
<font size=5>Texto com tamanho de fonte size=5</font><br>
<font size=4>Texto com tamanho de fonte size=4</font><br>
<font size=3>Texto com tamanho de fonte size=3</font><br>
<font size=2>Texto com tamanho de fonte size=2</font><br>
<font size=1>Texto com tamanho de fonte size=1</font><br>
Não use esta formatação. Como já lhe disse, use a css para fazer esse recurso funcionar.
Um dos principais benefícios de usar o font size é criar um padrão para exibição da fonte de letras do site.
Em outras palavras, assegura que você terá o visual da mensagem idêntico em todos os browsers.
Nota : a cor é dada pela mistura de 3 cores básicas : R(Red-Vermelha), G(Green-Verde), B(Blue-Azul) nessa sequencia.
O formato mais comum é o hexadecimal e o valor pode variar de #00 a #ff ( zero a 255 em hexadecimal ) para cada cor do conjunto RGB, o que dá, juntando as 3 cores: #rrggbb.
Código:
<font color="#ff0000">Usando a cor #ff0000 ou vermelha</font><br>
<font color="#00ff00">Usando a cor #00ff00 ou verde</font><br>
<font color="#0000ff">Usando a cor #0000ff ou azul</font><br>
São as cores puras, puro vermelho (R), verde(G), azul(B). Note que quanto maior o número mais visível é a cor.
Código:
<font color="#ff0000">Usando a cor #ff0000 ou vermelha</font><br><br />
<font color="#00ff00">Usando a cor #00ff00 ou verde</font><br><br />
<font color="#0000ff">Usando a cor #0000ff ou azul</font><br><br />
São a mistura de 2 cores : Amarela é a mistura de Vermelho e Verde, A Pink ou rosa é a mistura da Vermelha com a Azul e a Azul clara é a miestura da Verde com a Azul. Novamente, quanto maior o número mais forte é a cor.
Código:
<font color="#ffff00">Usando a cor #ffff00 - Amarela</font><br>
<font color="#ff00ff">Usando a cor #ff00ff - Pink ou rosa</font><br>
<font color="#00ffff">Usando a cor #00ffff - Azul Cyan</font><br>
O browser tem a capacidade de entender a cor que você deseja pelo nome também, infelizmente, em inglês.
Código:
<font color="green">Usando a cor green</font><br>
<font color="red">Usando a cor vermelha</font><br>
<font color="blue">Usando a cor azul</font><br>
<font color="lightblue">Usando a cor azul claro(lightblue)</font><br>
Estilo antigo - Tag font ( não use ):
Texto exibido na fonte Verdana cor Azul e tamanho 4
Texto exibido na fonte Arial cor vermelha e tamanho 2
Note que não precisamos mudar todos os caracteres da linha, podemos escolher apenas parte do texto que desejamos mudar.
Código:
<p>
<font size=4 color="blue" FACE='Verdana'>
Texto exibido na fonte Verdana cor Azul e tamanho 4
</font>
</p>
<p>
<font size=2 color="red" FACE='Arial'>
Texto exibido na fonte Arial cor vermelha e tamanho 2
</font>
</p>
<p>
Note que não precisamos mudar todos os caracteres da linha, podemos escolher apenas
<font size=5 color="green"> parte </font> do texto que desejamos mudar.
</p>
Estilo novo - css (este é o melhor e mais versátil):
Texto exibido na fonte Verdana cor Azul e tamanho 4
Texto exibido na fonte Arial cor vermelha e tamanho 2
Note que não precisamos mudar todos os caracteres da linha, podemos escolher apenas parte do texto que desejamos mudar.
<p style="font-size:25px;color:blue;font-family:Verdana">
Texto exibido na fonte Verdana cor Azul e tamanho 4
</p>
<p style="font-size:15px;color:red;font-family:Arial">
Texto exibido na fonte Arial cor vermelha e tamanho 2
</p>
<p>
Note que não precisamos mudar todos os caracteres da linha, podemos escolher apenas
<span style="font-size:25px;color:green"> parte </span> do texto que desejamos mudar.
</p>
Código:
<font size=7 color="#000000">D</font>
<font size=6 color="#800000">I</font>
<font size=5 color="#008000">M</font>
<font size=4 color="#808000">E</font>
<font size=3 color="#008080">N</font>
<font size=2 color="#00FF00">S</font>
<font size=1 color="#00FFFF">I</font>
<font size=2 color="#0FFF55">O</font>
<font size=3 color="#FF00FF">N</font>
<font size=4 color="#FF0000">A</font>
<font size=5 color="#800080">N</font>
<font size=6 color="#0000FF">D</font>
<font size=7 color="#000080">O</font>
Código:
<font size=1 color="#000000">D</font>
<font size=2 color="#800000">I</font>
<font size=3 color="#008000">M</font>
<font size=4 color="#808000">E</font>
<font size=5 color="#008080">N</font>
<font size=6 color="#00FF00">S</font>
<font size=7 color="#00FFFF">I</font>
<font size=6 color="#0FFF55">O</font>
<font size=5 color="#FF00FF">N</font>
<font size=4 color="#FF0000">A</font>
<font size=3 color="#800080">N</font>
<font size=2 color="#0000FF">D</font>
<font size=1 color="#000080">O</font>
Ou mesmo estilizar o texto como um livro de histórias infantis...
Era uma vez no país da carochinha...
Código :
<font size=7 color="#FF0000" face="Victoriand">E</font>ra uma vez no país da carochinha...
Podemos colocar o fundo com uma cor escura como preto por exemplo (style="background-color:black;") e o texto
com uma cor clara (style="color:white;) criando áreas distintas na página.
Também aumentei o tamanho da fonte para 25 pixels (font-size:25px) e obtive o seguinte efeito:
Texto comum antes da tag de formatação Texto claro com fundo escuro Texto comum depois da tag de formatação
Código:
Texto comum antes da tag de formatação
<span style="color:white;background-color:black;font-size:25px">Texto claro com fundo escuro</span>
Texto comum depois da tag de formatação
Texto exibido na fonte Calibri - Meu estilo predileto mas só existe no windows
Código:
<span style="font-family:Calibri;font-size:40px">Texto
exibido na fonte Calibri - <sup>Meu estilo predileto</sup> mas <sub>só existe no
windows</sub></span><br />
O HTML e CSS tem recursos para exibir o texto da maneira que você deseja, sempre. Esse é o ponto forte deles. Algumas vezes precisamos criar um site específico para assuntos científicos como matemática, física e química. Veja um exemplo:
H2O você pode beber porque é água mas H2SO4 não porque é ácido sulfúrico.
Código
H<sub>2</sub>O você pode beber porque é água mas H<sub>2</sub>SO<sub>4</sub> não porque é ácido sulfúrico.
Há recursos no html específicos para a química que evitam que você tenha que desenvolver um 'código' complexo para representar o simbolo químico. Como exemplo cito um caractere específico para desenhar o anel de benzeno : ⌬ que nada mais é que um caractere especial da web : ⌬
Caso deseje ver os caracteres especiais mais comuns usados na web Clique aqui
Se você não se lembra as raízes de uma equação de segundo grau ax2+bx+c=0 são dadas pela fórmula de baskara que é :
x = -b ± √ Δ Onde Δ = b2 - 4 * a * c
2 a
Código
Se você não se lembra as raízes de uma equação de segundo grau ax<sup>2</sup>+bx+c=0 são dadas pela fórmula de baskara que é :
x = <u>-b ± √ Δ</u> Onde Δ = b<sup>2</sup> - 4 * a * c<br />
É um pouco complexo escrever fórmulas matemáticas ou químicas mas não é impossível não, alias em html nada é impossível, apenas não é viável ou é trabalhoso e o serviço não rende.
Lembre-se que nos caracteres especiais temos símbolos matemáticos como frações ( Clique aqui ) entre muitos outros.
Temos representações de texto específicas para o comércio como é o caso de um desconto ou um preço novo do produto. Essa mesma notação é usada num documento quando um parágrafo antigo é eliminado e substituído por um novo. O mais comum é eliminarmos o antigo e escrevemos o novo mas algumas situações exigem que o texto anterior seja mantido, mas deve ser grafado como não mais em vigor, como no caso de decretos e leis e assuntos judiciais. Veja exemplo abaixo:
Abobrinha (Kg) : de R$ 8,70 por R$ 6,20
Fonte:
Abobrinha (Kg) : de <del>R$ 8,70</del> por R$ 6,20
O segredo de um texto é estar tudo junto quando for necessário ( como, por exemplo, uma piada num celular ) ou estar bem separado, evidenciado, quando for necessário ( como quando terminamos de explicar um item e queremos começar a explicar outro).
Um texto simples sempre será exibido no estilo in-line, ou seja, uma tag depois da outra e, se couber, na mesma linha. O que não couber na linha corrente, será escrito na linha seguinte, automaticamente feito pelo browser.
Para quebrar o texto em um certo ponto que desejamos inserimos a tag <br />.
É exatamente o que uma quebra de linha faz num processador de texto comum. Contudo guarda diferença da tag p.
A tag p é utilizada para separar um texto de outro texto, isolando em trechos onde dentro do trecho associado pela tag p o assunto é
o mesmo ou é anexo ao que se está falando.
Note que por ter como base separar ou dividir o texto a tag p sempre começa numa nova linha e com espaçamento antes da linha anterior
e depois da linha posterior.
A tag Header (h1 a h6) são padrões de exibição de cabeçalho de texto, como o cabeçalho de uma notícia num jornal.
Ela destaca o texto, separando, aumentando, negritando o texto sobre seu efeito.
Assim como a tag p a tag h tem o efeito de isolar o texto sob sua influência. Sendo assim sempre iniciam um novo parágrafo e se
separam dos demais evidenciando uma 'quebra' de assunto no texto.
Outro ponto importante é que H1 a H6 criam um
estilo 'padronizado' e é bem mais fácil memorizar que h3 é meu header que font-size:22 é meu header.
Se você conhece fonte de letras deve saber o que é uma fonte 'true-type' e como elas são exibidas. Revisando, cada letra da fonte tem uma representação gráfica de pixels acesos e apagados que formam a letra e uma outra informação sobre o espaçamento a ser dado naquela letra específica. A grande maioria das fontes 'NÃO SÃO MONOESPAÇADAS' e por esse motivo tanto a largura da letra como do espaço variam de letra para letra. Portanto existe uma tabela com o mapa de caracteres e do espaçamento a ser dado para cada letra na fonte de letras. Esse é o padrão para a maioria dos 'renderizadores de letras' implementados no HTML, SGML, PCL ( das impressoras ), PostScript, Word, Excel etc. Resumindo existem fontes de letras bem feitas que raramente você terá problemas para visualizá-las mas existem outras que o objetivo é justamente o contrário, dar um aspecto de inovador ou bem punk.
Não deram a css o poder de formatar o texto de graça no HTML5. Deram porque a css tem um poder absoluto sobre o DOM da página HTML e para atender o HTML5 o engine do browser teve que rebolar muito dando recursos que antes só um photoshop ou editor de imagens poderia fazer. Abaixo um exemplo dessa combinação, rotacionar o texto o quanto queremos.
Código:
<div style="writing-mode:vertical-rl;">"writing-mode:vertical-rl; ou lr"</div>
<div style="transform:rotate(90deg);margin-top:830px;margin-left:-1000px">style="transform: rotate(90deg)"</div>
<div style="transform:rotate(180deg);margin-top:-900px;margin-right:800px;">style="transform: rotate(180deg)"</div>
<div style="transform:rotate(270deg);margin-top:-640px;margin-left:-400px">style="transform: rotate(270deg)"</div>
<div style="transform:rotate(45deg);margin-top:800px">style="transform: rotate(45deg)"</div>
<div style="transform:rotate(-45deg);margin-top:-450px">style="transform: rotate(-45deg)"</div>
Infelizmente para produzir o efeito acima as tags de texto ( que são em linha ) tiveram que ser colocadas dentro de
uma div ( que é em bloco ) e, sendo assim, deixaram de ser simples texto.
Para que os textos não colidissem tive que colocar um margin nas tags div.
Outro problema é o espaço no fim da página...de onde veio ?
Se você não encontra uma fonte exatamente como precisa existem sites que permitem que você baixe fontes de letras e alguns deles são excepcionais. É o caso do Google Fonts que é um site realmente animal em relação a fontes de letras, idiomas...muito bom.